<template>
  <div class="info-page">
    <div class="tab-card el-page">
      <div class="info-title">选择农场与生产队</div>
      <el-tree :data="treeList" :props="defaultProps" node-key="code" :default-expanded-keys="[teamCode]"
        @node-click="handleNodeClick"></el-tree>
    </div>
    <div class="default-card el-page">
      <div class="header">
        <div class="header-team">
          <span class="searchText">当前生产队：</span>
          <span class="searchText">{{ teamName }}</span>
        </div>
        <div class="input-box">
          <div class="searchCard">
            <span class="searchText">净重总量(kg)：</span>
            <el-input class="shadowInput" v-model="nw" clearable size="mini" placeholder="" :disabled="true"></el-input>
          </div>
          <div class="searchCard">
            <span class="searchText">实重总量(kg)：</span>
            <el-input class="shadowInput" v-model="solid" clearable size="mini" placeholder=""
              :disabled="true"></el-input>
          </div>
        </div>
      </div>
      <el-divider class="divider"></el-divider>
      <div class="table-box">
        <div class="searchText">额度扣重</div>
        <TableCom style="height: calc(100% - 30px);overflow-y: auto;" ef="tableCom" :tableHead="tableHead"
          :tableData="tableData" :showSelect="false"></TableCom>
      </div>
      <div class="echart-box">
        <div class="echart-dom">
          <div class="chartMain0">
            <div class="titleLine"></div>
            <div class="titleText">净重实重对比</div>
          </div>
          <div class="echart" id="echart1" v-if="barList.length"></div>
          <el-empty description="暂无数据"></el-empty>
        </div>
        <div class="split-line"></div>
        <div class="echart-dom2">
          <div class="chartMain0">
            <div class="titleLine"></div>
            <div class="titleText">作物实重分布情况</div>
          </div>
          <div class="echart" id="echart2" v-if="pieList.length"></div>
          <el-empty description="暂无数据"></el-empty>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import TableCom from '@/components/TableCom'
import { farmListApi, realApi } from '@/api/limit'
export default {
  components: {
    TableCom
  },
  data() {
    return {
      farmCode: "D00001",
      teamCode: "D00041",
      teamName: '二队',
      // 净重
      nw: null,
      // 实重
      solid: null,
      treeList: [],
      defaultProps: {
        children: 'teamList',
        label: 'name'
      },
      tableHead: [{
        title: '粮食种类',
        prop: 'cropType'
      }, {
        title: '净重(kg)',
        prop: 'nw'
      }, {
        title: '预扣额度(%)',
        prop: 'lines'
      }, {
        title: '实重(kg)',
        prop: 'solid'
      }, {
        title: '上报人',
        prop: 'createUser'
      }, {
        title: '上报时间',
        prop: 'createTime'
      }, {
        title: '审批人',
        prop: 'updateUser'
      }, {
        title: '审批时间',
        prop: 'updateTime'
      }],
      tableData: [],
      pieList: [],
      barList: [],
    }
  },
  methods: {
    // 获取tree结构
    async handleGetTree() {
      let res = await farmListApi()
      if (this.$status == '0') {
        this.treeList = res.data
        this.farmCode = "D00001"
        this.teamCode = "D00041"
        this.teamName = '二队'
      } else if (this.$status == '1') {
        this.farmCode = this.$farmCode
        this.treeList = res.data.filter(item => item.code == this.$farmCode)
        this.teamCode = this.treeList[0].teamList[0].code
        this.teamName = this.treeList[0].teamList[0].name
      } else {
        this.farmCode = this.$farmCode
        this.teamCode = this.$teamCode
        this.treeList = res.data.filter(item => item.code == this.$farmCode)
        this.treeList[0].teamList = this.treeList[0].teamList.filter(item => item.code == this.$teamCode)
        this.teamName = this.treeList[0].teamList[0].name
      }

      this.getList()
    },
    // 获取图表数据
    async getList() {
      let res = await realApi({ farmCode: this.farmCode, teamCode: this.teamCode })
      if (res.data.list && res.data.list.length) {
        this.tableData = res.data.list
        this.tableData.forEach(item => {
          this.nw += item.nw * 1
          this.solid += item.solid * 1
        })
      } else {
        this.nw = null
        this.solid = null
        this.tableData = []
      }
      if (res.data.list2 && res.data.list2.length) {
        this.pieList = res.data.list2
        const arr = this.pieList.map(item => {
          return {
            name: item.cropName,
            value: item.solid
          }
        })
        this.$nextTick(() => {
          this.handleDistribution(arr)
        })
      } else {
        this.pieList = []
        // this.$nextTick(() => {
        //   this.handleDistribution([])
        // })
      }
      if (res.data.crop && res.data.crop.length) {
        this.barList = res.data.crop
        this.$nextTick(() => {
          this.handleCompare(res.data.crop, res.data.nw, res.data.solid)
        })
      } else {
        this.barList = []
        // this.$nextTick(() => {
        //   this.handleCompare([], [], [])
        // })
      }
    },
    handleNodeClick(data) {
      if ('teamList' in data) {
        this.farmCode = data.code
      } else {
        // 获取农场 code
        const findParent = (nodes) => {
          for (const item of nodes) {
            if (item.teamList && item.teamList.some(child => child.code === data.code)) {
              this.farmCode = item.code;
              break;
            }
            if (item.teamList) {
              findParent(item.teamList);
            }
          }
        };
        findParent(this.treeList);
        this.teamName = data.name
        this.teamCode = data.code
        this.getList()
      }
    },
    // 净重实重对比
    handleCompare(arrX, arrY1, arrY2) {
      const chartDom = document.getElementById('echart1');
      const myChart = echarts.init(chartDom);
      // if (myChart != null && myChart != '' && myChart != undefined) {
      //   myChart.dispose()
      // }
      let option;
      option = {
        title: {
          show: true,
          subtext: 'kg',
          left: '70',
          subtextStyle: {
            fontSize: 12,
            color: '#888'
          }
        },
        tooltip: {
          formatter: function (params) {
            let tooltipContent = ''
            for (let i = 0; i < params.length; i++) {
              tooltipContent += params[i].seriesName + ':' + params[i].value + 'kg' + '<br />'
            }
            return tooltipContent;
          },
          trigger: 'axis',
          textStyle: {
            fontSize: 12,
            color: '#fff'
          },
          axisPointer: {
            type: 'cross'
          },
          borderWidth: 0,
          backgroundColor: 'rgba(0, 0, 0, 0.6)', // 设置背景色为黑色，透明度为0.8
          bodyFontSize: 14, // 设置文字大小
          bodyFontColor: '#fff', // 设置文字颜色为白色
        },
        color: ['#64c0ff', '#91e5d6', '#fb9bab'],
        legend: {
          bottom: '15',
          itemWidth: 20, // 图例标记的宽度
          itemHeight: 10, // 图例标记的高度
        },
        grid: {
          left: '10%',  // 网格距离容器左侧的距离
          right: '10%', // 网格距离容器右侧的距离
          top: '13%',      // 网格距离容器顶部的距离
          bottom: '25%'    // 网格距离容器底部的距离
        },
        xAxis: {
          type: 'category',
          data: arrX,
          axisLabel: {
            show: true,
            color: '#888888',
            fontSize: 14,
            interval: 0
          },
          axisTick: {
            show: false
          },
          splitArea: {
            show: true,
            areaStyle: {
              interval: 0,
              color: '#fff',
              opacity: 0.0

            },
          },
        },
        yAxis: {
          type: 'value',
          splitLine: {  // 坐标轴在 grid 区域中的分隔线
            lineStyle: { // 分隔线
              type: 'dashed', // 线的类型
              color: '#f1f1f1'
            }
          },
          axisLabel: {
            show: true,
            color: '#888888',
            fontSize: 14,
            interval: 0,
          },
        },
        series: [
          {
            name: '净重',
            barWidth: '10',
            data: arrY1,
            type: 'bar',
            showBackground: false,
            backgroundStyle: {
              // 背景色
              color: "rgba(255,255,255,0.1)",
            }
          },
          {
            name: '实重',
            barWidth: '10',
            data: arrY2,
            type: 'bar',
            showBackground: false,
            backgroundStyle: {
              // 背景色
              color: "rgba(255,255,255,0.1)",
            }
          }]
      };

      option && myChart.setOption(option);
    },
    // 作物实重分布情况
    handleDistribution(list) {
      const chartDom = document.getElementById('echart2');
      const myChart = echarts.init(chartDom);
      let option;
      option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c}kg',
          borderWidth: 0,
          backgroundColor: 'rgba(0, 0, 0, 0.6)', // 设置背景色为黑色，透明度为0.8
          textStyle: {
            fontSize: 12,
            color: '#fff'
          },
        },
        legend: {
          bottom: '0%',
          left: 'center',
          itemWidth: 10, // 图例标记的宽度
          itemHeight: 10, // 图例标记的高度
          textStyle: {
            color: '#888'
          }
        },
        color: ['#fb9bab', '#91e5d6', '#64c0ff'],
        series: [
          {
            type: 'pie',
            radius: '60%',
            data: list,
            emphasis: {
              scale: true, // 开启放大动画
              scaleSize: 15, // 放大的程度
            },
            label: {
              color: '#888'
            },
            labelLine: {
              length: 30, // 标签线长度
              length2: 50 // 控制第二段线长，一般不用设置，这个就是控制线段最长
            },
          }
        ]
      };

      option && myChart.setOption(option);
    },
  },
  mounted() {
    this.handleGetTree()
  },
}
</script>

<style lang='scss' scoped>
.info-page {
  display: flex;
  height: calc(100vh - 70px);



  .tab-card {
    width: 15%;
    margin-right: 1%;
    height: 100%;
    padding: 10px;


    .info-title {
      width: 100%;
      height: 40px;
      line-height: 40px;
      background-color: #65C0AF;
      font-size: 16px;
      color: #fff;
      text-align: center;
    }
  }

  .default-card {
    width: 84%;
    height: 100%;
    padding: 40px;

    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .input-box {
        display: flex;
        align-items: center;
      }
    }

    .table-box {
      box-shadow: 0 3px 3px #dfdfdf;
      border-radius: 3px;
      padding: .5vw;
      height: 40%;
    }

    .echart-box {
      margin-top: 2%;
      box-shadow: 0 3px 3px #dfdfdf;
      border-radius: 3px;
      padding: .5vw;
      height: 52%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .echart-dom {
        width: 62%;
        height: 100%;
      }

      .chartMain0 {
        width: 100%;
        height: 3vh;

        .titleLine {
          width: 4px;
          height: 100%;
          position: relative;
          float: left;
          background: #16745e;
        }

        .titleText {
          color: #4f4f4f;
          font-size: .9em;
          font-weight: 700;
          margin: 0 1.5vw;
          line-height: 3vh;
        }
      }

      .echart {
        width: 100%;
        height: calc(100% - 3vh);
      }

      .echart-dom2 {
        width: 37%;
        height: 100%;
      }

      .split-line {
        width: 1px;
        height: 100%;
        background-color: #dcdfe6;
      }
    }
  }

}
</style>
